<template>
  <div>
    <div class="top_div">
      <div class="navigationBar">
        <div class="tag_div">
          <a-image
              src="https://s1.ax1x.com/2022/07/14/jfSg76.md.png"
              class="tag"
              :preview="false"
              @click="routeTo('/index')"
          ></a-image>
        </div>
        <div class="menu_div">
          <a-menu
              v-model:selectedKeys="current"
              mode="horizontal"
              class="menu_top"
          >
            <a-menu-item @click="routeTo('/index')" key="0">首页</a-menu-item>
            <a-menu-item @click="routeTo('/study')" key="1">学习</a-menu-item>
            <a-menu-item @click="routeTo('/food')" key="2">美食</a-menu-item>
            <a-menu-item @click="routeTo('/idle')" key="3">闲置</a-menu-item>
            <a-menu-item @click="routeTo('/activity')" key="4">活动</a-menu-item>
            <a-menu-item @click="routeTo('/fun')" key="5">灌水</a-menu-item>
          </a-menu>
        </div>
        <div class="search_div">
          <a-input-search
              v-model:value="value"
              placeholder="input search text"
              style="width: 350px; border-radius: 10px"
              @search="onSearch"
          />
        </div>
        <div class="login_div">
          <div v-if="visitor===null">
            <a-button type="primary" style="border-radius: 10px" @click="routeTo('/login')">
              登录
            </a-button>
          </div>
          <div v-else>
            <a-dropdown :placement="bottomRight" :trigger="['click']">
              <a @click.prevent>
                <span>
                  <a-badge>
                    <a-avatar shape="square">
                      <template #icon>
                        <a-image
                            style="border-radius: 10px"
                            :src="'/api/assets/avatar/'+visitor.u_avatar"
                            :preview="false"
                        ></a-image>
                      </template>
                    </a-avatar>
                  </a-badge>
                </span>
                <DownOutlined />
              </a>
              <template #overlay>
                <a-menu style="margin-top: 5px">
                  <a-menu-item key="0" @click="routeTo('/user/'+visitor.u_account)">我的主页</a-menu-item>
                  <a-menu-divider />
                  <a-menu-item key="1">设置</a-menu-item>
                  <a-menu-divider />
                  <a-menu-item key="2">角色切换</a-menu-item>
                  <a-menu-divider />
                  <a-menu-item key="3" @click="quit">退出</a-menu-item>
                </a-menu>
              </template>
            </a-dropdown>
          </div>
        </div>
      </div>
    </div>

    <div>
      <!-- 用户头像，姓名，简介 -->
      <div style="height: 260px">
        <div class="userPhoto">
          <a-avatar :size="90" style="padding: 4px" :src="'/api/assets/avatar/'+target.avatar">
            <template #icon><UserOutlined /></template>
          </a-avatar>
        </div>

        <div class="userName"><span>{{target.name}}</span></div>

        <div class="userBiog"><span>{{target.intro}}</span></div>

        <!-- 其他用户访问界面，显示按钮 -->
        <div class="accessbac" v-if="target.num!==visitor.u_account">
          <div class="access-state" v-if="isFollowed" @click="unfollowUser"><span>取消关注</span></div>
          <div class="access-state" v-else @click="followUser"><span>关注</span></div>

          <div class="access-button">
            <a-dropdown>
              <template #overlay>
                <a-menu>
                  <a-menu-item key="3"><a :href="'/chat?userId='+target.id">私信</a></a-menu-item>
                  <a-menu-item key="4" @click="$refs.reportUserRef.showModal(target.id)">举报</a-menu-item>
                </a-menu>
              </template>
              <a-button>
                操作
                <DownOutlined />
              </a-button>
            </a-dropdown>
          </div>
        </div>
      </div>
      <!-- 用户信息，关注，收藏 -->
      <div class="menu-mid">
        <a-menu v-model:selectedKeys="current" mode="horizontal" class="menu">
          <a-menu-item
            @click="routeToSub('/all')"
            key="0"
            style="width: 24%; font-size: 16px"
          >
            <template #icon><mail-outlined /></template>全部
          </a-menu-item>
          <a-menu-item
            @click="routeToSub('/follow')"
            key="1"
            style="width: 24%; font-size: 16px"
          >
            <template #icon v-if="target.num===visitor.u_account"><setting-outlined /></template>关注
          </a-menu-item>
          <a-menu-item
            @click="routeToSub('/collect')"
            key="2"
            style="width: 24%; font-size: 16px"
          >
            <template #icon><setting-outlined /></template>收藏
          </a-menu-item>
          <a-menu-item
            @click="routeToSub('/edit')"
            key="3"
            v-if="target.num===visitor.u_account"
            style="width: 24%; font-size: 16px"
          >
            <template #icon><setting-outlined /></template>修改
          </a-menu-item>
        </a-menu>
      </div>

      <!-- 左侧小信息栏，右侧分界面 -->

      <div class="menu-mid">
        <!-- 左侧小信息栏 统计，个人信息-->
        <div class="user_left">
          <div class="left_item">
            <li class="tongji">
              <div
                style="text-align: center; font-size: 21px; font-weight: bolder"
              >
                {{targetStats.followNum}}
              </div>
              <span>关注</span>
            </li>
            <li class="tongji">
              <div
                style="text-align: center; font-size: 21px; font-weight: bolder"
              >
                {{targetStats.fansNum}}
              </div>
              <span>粉丝</span>
            </li>
            <li class="tongji">
              <div
                style="text-align: center; font-size: 21px; font-weight: bolder"
              >
                {{targetStats.postNum}}
              </div>
              <span>发帖</span>
            </li>
            <li class="tongji">
              <div
                style="text-align: center; font-size: 21px; font-weight: bolder"
              >
                {{targetStats.collectNum}}
              </div>
              <span>收藏</span>
            </li>
            <li class="tongji">
              <div
                  style="text-align: center; font-size: 21px; font-weight: bolder"
              >
                {{targetStats.likeReceived}}
              </div>
              <span>获赞</span>
            </li>
          </div>

          <div class="left_item">
            <div>
              <h4>个人资料</h4>
              <li class="info">ID : <span>{{target.id}}</span></li>
              <li class="info">账号 : <span>{{target.num}}</span></li>
              <li class="info">昵称 :<span>{{ target.name }}</span></li>
              <li class="info">性别 :
                <span v-if="target.sex===0">男</span>
                <span v-else>女</span>
              </li>
              <li class="info">个人简介 : <span>{{target.intro}}</span></li>
            </div>
          </div>
        </div>

        <div class="user_right">
          <router-view></router-view>
        </div>
      </div>
    </div>
  </div>
  <report-user ref="reportUserRef"></report-user>
</template>

<script>
import { useRouter } from "vue-router";
import { EventSourcePolyfill } from "event-source-polyfill";
import {computed, reactive, ref} from "vue";
import {get, post, removeLocalToken} from "@/common";
import reportUser from "@/components/report/ReportUser.vue";

export default {
  components :{
    reportUser
  },
  data(){
    const current = ref();
    const target = reactive({
      id: null,
      num: null,
      mail: null,
      name: null,
      avatar: null,
      reg: null,
      state: null,
      sex: null,
      intro: null,
      area: null,
      birth: null
    });
    const targetStats = reactive({
      uid: null,
      followNum: null,
      fansNum: null,
      collectNum: null,
      postNum: null,
      commentNum: null,
      likeReceived: null
    });
    const visitor = reactive({
      u_id: null,
      u_account: null,
      u_name: null,
      u_avatar: null
    });
    const router = useRouter(); //获取路由器
    return {
      current,
      visitor,
      router, target, targetStats,
      isFollowed: ref(false),
      isSelf: computed(()=>{
        if(visitor===null)
          return false;
        else
          return visitor.u_account===target.num;
      }),
    }
  },
  methods: {
    routeTo(_path){
      this.router.push({path:_path});
    },
    routeToSub(_path){
      this.routeTo('/user/'+ this.$route.params.account +_path)
    },
    getCurrentUser(){
      get('/test/security').then((res)=>{
        if(res!=null){
          this.visitor=res.data;
          if(this.target.num!==this.visitor.u_account){
            this.checkFollow();
          }
        }
      })
    },
    getTargetUser(){
      get('/user/'+this.$route.params.account+'/brief').then((res)=>{
        if(res!=null){
          this.target=res.data;
        }
      });
    },
    getTargetStats(){
      get('/user/'+this.$route.params.account+'/stats').then((res)=>{
        if(res!=null){
          this.targetStats=res.data;
        }
      });
    },
    quit(){
      removeLocalToken();
      this.routeTo('/home');
    },
    followUser(){
      post('/user/'+this.$route.params.account+'/follow').then((res)=>{
        if(res!=null){
          this.isFollowed=true;
        }
      });
    },
    unfollowUser(){
      post('/user/'+this.$route.params.account+'/unfollow').then((res)=>{
        if(res!=null){
          this.isFollowed=false;
        }
      });
    },
    checkFollow(){
      get('/user/'+this.$route.params.account+'/follow').then((res)=>{
        if(res!=null){
          this.isFollowed=(res.data==='true'||res.data===true);
        }
      });
    }
  },
  mounted() {
    this.getTargetUser()
    this.getTargetStats()
    this.getCurrentUser()
  },
  created() {
    this.$watch(
        ()=> this.$route.params, (toParams, prevParams)=>{
          if(toParams.account!==prevParams.account){
            this.getTargetUser()
            this.getTargetStats()
          }}
    )
  }
}

// 实时消息，勿改！！！
// const eventSource = new EventSourcePolyfill("/api/message/subscribe", {
//   headers: {
//     "X-Custom-Header": "value",
//     Token: getLocalToken(),
//   },
// });
//
// eventSource.onmessage = (event) => {
//   console.log(event);
// };
// console.log($route.params);
// getCurrentUser()
// getTargetUser()
</script>

<style>
body {
  background: url("https://s1.ax1x.com/2022/07/15/jhK8hQ.md.png") no-repeat;
  background-size: 100% 100%;
  background-attachment: fixed;
}

h4 {
  font-size: 14px;
  border-left: 3px solid rgba(0, 0, 0, 0.8);
  padding-left: 8px;
  line-height: 16px;
  margin-bottom: 15px;
  font-weight: normal;
  margin-top: 10px;
  text-align: left;
}

.userPhoto {
  width: 100px;
  height: 100px;
  padding: 4px;
  border-radius: 50%;
  margin: 5px auto 0;
  cursor: pointer;
  position: relative;
}

.userName {
  text-align: center;
  color: #ff5722;
  font-size: 16px;
  font-weight: normal;
  margin-right: -2px;
  overflow: hidden;
  vertical-align: -2px;
}

.userBiog {
  text-align: center;
  color: #fff;
  font-size: 14px;
  margin-top: 10px;
  line-height: 18px;
  text-shadow: 0 0 4px rgb(0 0 0 / 50%);
}

.menu {
  background-color: rgba(255, 255, 255, 0.9);
  clear: both;
  position: relative;
  margin-bottom: 10px;
  padding: 0px 50px 0px;
  text-align: center;
  display: flex;
  border-radius: 5px;
}
.menu-mid {
  width: 1150px;
  margin: auto;
}

.user_left {
  width: 320px;
  height: auto;
  float: left;
  position: relative;
  background: rgba(255, 255, 255, 0);
}

.user_right {
  width: 820px;
  height: auto;
  float: right;
  position: relative;
  background: rgba(255, 255, 255, 0.9);
  padding: 0px 5px 15px;
  border-radius: 5px;
}

.left_item {
  background-color: rgba(255, 255, 255, 0.9);
  clear: both;
  position: relative;
  margin-bottom: 10px;
  padding: 0px 20px 4px;
  text-align: center;
  display: flex;
  border-radius: 5px;
}

.left_item .tongji {
  float: left;
  width: 25%;
  text-align: center;
  border-right: 1px solid rgba(241, 241, 241, 0.5);
  box-sizing: border-box;
  cursor: pointer;
  list-style-type: none;
  font-size: 14px;
  display: block;
  color: #808080;
}

.left_item .info {
  list-style-type: none;
  text-align: left;
  display: block;
  color: #808080;
  padding: 0px 5px 4px;
  margin-bottom: 15px;
}

.accessbac {
  width: 250px;
  height: 100px;
  padding: 4px;
  border-radius: 50%;
  margin: 10px auto 0;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.access-state {
  float: left;
  color: #ffffffc5;
  padding: 2px 20px 2px;
  font-size: 16px;
  background-color: #4c8eda;
  margin-right: 10px;
}

.access-button {
  display: flex;
  align-items: center;
  padding: 10px 0px 10px;
  margin-right: 15px;
  float: right;
}

.left_top_button {
  width: 80px;
  height: 50px;
  float: left;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tag {
  height: 40px;
}
.top_div {
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0px 5px 10px -10px gray;
  background-color: rgb(255, 255, 255);
}

.navigationBar {
  line-height: 60px;
  border: 5px;
  min-width: 1156px;
}

.tag_div {
  height: 60px;
  float: left;
  width: 200px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow-x: hidden;
}

.tag {
  height: 40px;
}

.menu_div {
  float: left;
  height: 60px;
  overflow-x: hidden;
}

.menu_top {
  height: 60px;
  display: flex;
  align-items: center;
  border: none;
}

.search_div {
  height: 60px;
  width: 400px;
  float: left;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-x: hidden;
}

.login_div {
  width: 100px;
  height: 60px;
  float: left;
  display: flex;
  align-items: center;
  justify-content: center;
}

.home_center {
  width: 70%;
  height: 500px;
  vertical-align: middle;
  margin-top: 10px;
  position: relative;
  margin-right: 15%;
  margin-left: 15%;
}
</style>